<template>
	<view class="list">

		<slot name="titlebar" v-if="hasTitle">
			<view class="title-bar">{{title}}</view>
		</slot>
		<view class="list-item" v-for="(item,index) in dataList" :key="index" @tap="tapItem(item)">

			<view class="icon-box">
				<slot name="left">
					<image src="/static/map/jg/jg.png"></image>
				</slot>
			</view>

			<view class="content-box" >
				<view class="item">{{item.imei}}</view>
				<view class="item">{{item.address}}</view>
				<view class="item">{{item.createTime}}</view>

			</view>
			<view class="btn-box">
				<view class="btn iconfont iconsandian" v-show="hasBtn"></view>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default(){
					return []
				}
			},
			hasTitle:{
				type: Boolean,
				default: false
			},
			hasBtn: {
				type: Boolean,
				default: true
			},
			title: String

		},

		methods: {
			tapItem(item) {
				this.$emit('ontapitem', JSON.stringify(item))
			}
		}

	}
</script>

<style scoped lang="scss">
	.red {
		color: red;
	}

	.grey {
		color: grey;
	}

	.yellow {
		color: yellow;
	}

	.list {

		height: calc(100vh - #{$nav-bar-height});
		overflow-y: auto !important;
		background-color: $color-bg-primary;
		color: $color-text-white;
		

		.title-bar {

			font-size: 32upx;
			border-top: 1px solid $color-border-grey;
			border-bottom: 1px solid $color-border-grey;
			padding: 10upx 40upx;
		}

		.list-item {

			display: flex;
			justify-content: space-around;
			align-items: center;
			border-bottom: 1px solid $color-border-grey;

			.icon-box {
				flex: 1;
				padding-top: 20upx;
				padding-bottom: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 70upx;
					height: 70upx;
				}
			}

			.content-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: auto;
				flex: 5;
				font-size: 30upx;
				.item{
					line-height: 50upx;
				}
			}

			.btn-box {

				flex: 1;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;


				.btn {
					width: 60upx;
					height: 60upx;
					border-radius: 10upx;
					line-height: 60upx;
					text-align: center;

					background-color: $color-bg-primary--lighter;
					opacity: 0.5;
					border: 1px solid $color-border-grey;
				}
			}

		}
	}
</style>
